import { Select, Typography } from 'antd'
import { Fragment, useEffect, useState } from 'react'
import { commonSelectProps } from '@/views/ShoppingCart/commonProps.ts'
import { getOrderItemMappingsResults } from '@/api/shoppingCart.ts'

const { Text } = Typography

const ChooseField = ({
  fieldList,
  options,
  disabled = false,
  orderId,
  mappingTableName
}: {
  fieldList: Array<{
    name: string
    comment: string
    description: string
  }>
  options: Array<any>
  disabled?: boolean
  orderId: string
  mappingTableName: string
}) => {
  const [mappingResults, setMappingResults] = useState([])

  useEffect(() => {
    getOrderItemMappingsResults({ order_item_id: orderId }).then((res) => {
      console.log(res, '*')
      setMappingResults(res.items)
    })
  }, [orderId, mappingTableName])

  console.log(mappingResults, 'mappingResults', mappingTableName)

  return (
    <div>
      <div className="py-4">（可在下方选择所需该表的字段，或直接默认全部，在下单时可再次修改）</div>
      <div className="grid grid-cols-24 border-gray-200 bg-gray-100 gap-1px border border-gray border-solid max-h-80vh overflow-auto my-grid-table">
        <div className="col-span-2 th">序号</div>
        <div className="col-span-5 th">字段名</div>
        <div className="col-span-5 th">中文名</div>
        <div className="col-span-4 th">字段说明</div>
        <div className="col-span-8 th">映射字段</div>
        {fieldList.map((item, index) => (
          <Fragment key={item.name}>
            <div className="col-span-2">{index + 1}</div>
            <div className="col-span-5">{item.name}</div>
            <div className="col-span-5">{item.comment}</div>
            <div className="col-span-4">
              <Text ellipsis={{ tooltip: true }}>{item.description}</Text>
            </div>
            <div className="col-span-8">
              <Select
                {...commonSelectProps}
                disabled={disabled}
                className="w-full"
                value={item.dst_col_name || null}
                options={options}
                onChange={(value) => {
                  setFieldList((prevState) =>
                    prevState.map((it) => {
                      if (it.src_col_name === item.src_col_name) {
                        it.dst_col_name = value
                      }
                      return it
                    })
                  )
                }}
                showSearch
                filterOption={(input: string, option?: { label: string; value: string }) =>
                  (option?.value ?? '').toLowerCase().includes(input.toLowerCase())
                }
              />
            </div>
          </Fragment>
        ))}
      </div>
    </div>
  )
}

export default ChooseField
